<script setup>
import router from "@/router/index.js";
import {onMounted, reactive} from "vue";
import request from "@/utils/request.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code_user') || "{}"),
  port: 'http://localhost:9999',
  ordersList: [],
})

onMounted(() => {
  load()
})

const load = () => {
  request.get('/orders/selectOrdersById', {
    params: {
      userId: data.user.id
    }
  }).then(res => {
    if (res.code === '200') {
      data.ordersList = res.data
    }
  })
}

</script>

<template>
  <div>
    <!--   返回-->
    <div style="display: flex;align-items: center;flex-direction: row;margin-top: 10px"
         @click="router.push('/home')">
      <el-icon size="large"><Back /></el-icon>
      <span style="margin-left: 5px">返回</span>
    </div>

    <div class="content-wrapper">
      <div>
        <div
            class="card"
            v-for="orders in data.ordersList"
            :key="orders.id"
            style="margin-bottom: 10px"
        >
          <div style="display: flex;flex-direction: column;gap: 5px">
            <div style="font-size: 20px;font-weight: bold">{{ orders.name }}</div>
            <div style="display: flex;flex-direction: row;gap: 20px;">
              <div style="color: red">金额:￥{{orders.price}}</div>
              <div>购买数量:{{orders.amount}}</div>
            </div>

            <div style="color: #a4a4a4">订单编号:{{orders.number}}</div>
            <div style="color: #a4a4a4">时间:{{orders.time}}</div>

          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content-wrapper {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  margin-top: 20px;
}
</style>